<template>
    <div id="box">
        <h3>用户信息列表</h3>
        <!--        搜索-->
        <div id="search">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="状态">
                        <el-option label="禁用" value="1"></el-option>
                        <el-option label="正常" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--         分割区域-->
        <el-divider content-position="right">分割线</el-divider>
        <!--        头部工具栏-->
        <div id="headerTool">
            <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="add">新增</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
        </div>
        <!--表格主体-->
        <div id="table-data">
            <el-table
                    :data="tableData"
                    stripe
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>

                        <el-popconfirm
                            title="确认删除当前行数据吗"
                           @confirm="del(scope.row)">
                            <el-button  type="danger" size="mini" slot="reference">删除</el-button>
                        </el-popconfirm>
<!--                        <el-button-->
<!--                                size="mini"-->
<!--                                type="danger"-->
<!--                                @click="handleDelete(scope.$index, scope.row)">删除-->
<!--                        </el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div id="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="pageSizes"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--弹出层-->
        <div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" @close="clear">
                <el-form :model="form" label-position="right">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth">
                        <el-input v-model="form.tel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色" :label-width="formLabelWidth">
                        <el-select v-model="form.roleId" placeholder="请选择活动区域" style="width: 100%">
                            <el-option label="管理员" value="s1"></el-option>
                            <el-option label="普通用户" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrEdit">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            title: '新增',
            formLabelWidth: '80px',
            dialogFormVisible: false,  //  控制弹窗层 显示和隐藏
            searchForm: {
                username: '',
                status: ''
            },
            form: {
                username: '',
                tel: '',
                address: '',
                roleId: ''
            },
            limit: 5,
            page: 1,
            total: 100,
            pageSizes: [5, 10, 15, 20, 30],
            multipleSelection: [],  //  收集复选框选中的数据
            tableData: [{
                id: 0,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 1,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                id: 2,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                id: 3,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        // 复选框回调
        handleSelectionChange(val) {  //  val是当前已经选中的行数据  [{},{}]
            let ids = val.map(v => v.id);
            this.multipleSelection = ids
            console.log(JSON.stringify(this.multipleSelection))
        },
        // 编辑回调
        handleEdit(index, row) {

            console.log(index, JSON.stringify(row));
            // 发送异步请求  数据回显

            this.dialogFormVisible = true
            this.title = '编辑'
        },
        // 删除回调
        handleDelete(index, row) {
            console.log(index, JSON.stringify(row));
        },
        //下拉选的切换回调  size
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            // 发送异步请求  重新加载数据
        },
        // 切换页码回调函数
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 发送异步请求  重新加载数据
        },
        onSubmit() {
            console.log(JSON.stringify(this.searchForm))
        },
        // 添加

        add() {
            // 显示弹出层
            this.dialogFormVisible = true
            this.title = '新增'
        },
        batchDelete() {

        },
        del(row){
            console.log("删除数据"+row.id)
        },
        addOrEdit() {
            this.dialogFormVisible = false
            if (this.title == '新增') {
                console.log("添加用户信息" + JSON.stringify(this.form))
            } else {
                console.log("编辑用户信息" + JSON.stringify(this.form))
            }
        },
        clear() {

            console.log("弹窗关闭")
            this.form = {
                username: '',
                tel: '',
                address: '',
                roleId: ''
            }
        }
    }
}
</script>

<style scoped>

h3 {
    color: #42b983;
    text-align: center;
    margin-top: 50px;
}

#box {
    width: 80%;
    margin: 0 auto;
}

#table-data {
    margin-top: 20px;
}

#pagination {
    margin-top: 20px;
}
</style>